import React from 'react';
import {Text} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';

export default function ColorButton(props: any) {
  const {disabledContainerStyle, disabled, onPress, containerStyle} = props;
  return (
    <TouchableOpacity
      disabled={disabled}
      onPress={onPress}
      style={{
        height: props.height || 44,
        borderRadius: props.borderRadius || (props.height || 44) / 2,
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: props.fontSize || 14,
        backgroundColor: props.backgroundColor || 'white',
        ...(disabled
          ? {...containerStyle, ...disabledContainerStyle}
          : containerStyle),
      }}>
      <Text
        style={{
          fontSize: props.fontSize || 14,
          color: props.color || 'white',
          textAlign: 'center',
        }}>
        {props.title || props.children}
      </Text>
    </TouchableOpacity>
  );
}
